/*
 * @Author: shaohh 
 * @Date: 2022-11-03 10:38:54 
 * @Last Modified by: shaohh
 * @Last Modified time: 2023-01-18 09:24:05
 */
<template>
    <el-dialog title="" v-if="dialogVisible" class="file_dialog" top="2vh" :visible.sync="dialogVisible" :show-close="false"  width="90%"
        :close-on-click-modal="true" :append-to-body="true">
        <span slot="title">{{fileName}}</span>
        <div class="xlsxBox" ref="output"></div>
    </el-dialog>
</template>
    
<script>
import 'viewerjs/dist/viewer.css'
import { api as viewerApi } from 'v-viewer'
import * as XLSX from 'xlsx'
import { getExtend, readBuffer, render } from "./fileView/util";
// import WebOfficeSDK from '@/utils/web-office-sdk/web-office-sdk-v1.1.19.umd'
export default {
    name: "fileViewDialog",
    components: {},
    data() {
        return {
            dialogVisible: false,
            showUrl: '',
            isImg: false,
            name: "",
            fileName:'',
        }
    },
    props: {

    },
    created() {

    },
    mounted() {
    },
    methods: {
        showFileView(url,fileName){
            let that = this
            fetch(url).then(res => res.blob()).then(blob => {
                    let file = new File([blob], fileName, { type: blob.type })
                    switch (blob.type) {
                        // .doc文件
                        case 'application/msword':
                        that.showFile(file)
                            break;
                        // .docx文件
                        case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
                        that.showFile(file)
                            break;
                        // .xls
                        case 'application/vnd.ms-excel':
                        that.showFile(file)
                            break
                        // .xlsx
                        case 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
                            that.showFile(file)
                            break
                        // .ppt
                        case 'application/vnd.ms-powerpoint':
                        that.showFile(file)
                            break
                        //.pptx
                        case 'application/vnd.openxmlformats-officedocument.presentationml.presentation':
                        that.showFile(file)    
                        break
                        default:
                        that.showFile(file)
                            break;
                    }
                })
        },
        openDialog(url, fileName) {
            this.fileName = fileName
            this.showUrl = url
            this.showFile()
            // this.fileImg()
        },
        // 判断是不是图片
        fileImg() {
            let that = this
            let imgObj = new Image()
            imgObj.src = this.showUrl
            imgObj.onload = function (res) {
                that.isImg = true
                viewerApi({
                    images: [that.showUrl],
                    options: {
                        initialViewIndex: 0,
                    },
                })
                return true
            }
            imgObj.onerror = function (err) {
                that.showFileView(that.showUrl, that.fileName)
                return false
            }
        },
        showFile(){
            // this.dialogVisible = true
            // // return

            // const jssdk = WebOfficeSDK.config({
            //     url:this.showUrl,
            //     mount:document.querySelector('.xlsxBox')

            // })
            // jssdk.on('fileOpen',data=>{
            // })
        },
        // async showFile(file) {
            
        //     const arrayBuffer = await readBuffer(file);
        //     this.last = await this.displayResult(arrayBuffer, file);
        // },
        displayResult(buffer, file) {
            // 取得文件名
            const { name } = file;
            this.name = name;
            // 取得扩展名
            const extend = getExtend(name);
            // 输出目的地
            const { output } = this.$refs;
            // 生成新的dom
            const node = document.createElement("div");
            // 添加孩子，防止vue实例替换dom元素
            // if (this.last) {
            //   output.removeChild(this.last.$el);
            //   this.last.$destroy();
            // }
            const child = output.appendChild(node);
            // 调用渲染方法进行渲染
            return new Promise((resolve, reject) =>
                render(buffer, extend, child).then(resolve).catch(reject)
            );
        },
        // // xlsx文件预览
        // showXlsx(){
        //     let that = this
        //     let xhr = new XMLHttpRequest()
        //     xhr.open('get',this.showUrl,true)
        //     xhr.responseType = 'arraybuffer'
        //     xhr.onload = function(e) {
        //         if(xhr.status==200){
        //             var data = new Uint8Array(xhr.response)
        //             var workbook = XLSX.read(data,{type :'array'})
        //             var worksheet = workbook.Sheets[workbook.SheetNames[0]]
        //             that.dialogVisible = true
        //             var sheetNames = workbook.SheetNames; // 工作表名称集合
        //             that.$nextTick(()=>{
        //                 document.querySelector('.xlsxBox').innerHTML = XLSX.utils.sheet_to_html(worksheet);
        //             })

        //         }
        //     }
        //     xhr.send()
        // },

    }
}
</script>
<style lang="less" scoped>
.file_dialog {
    /deep/ .el-dialog {
        text-align: center;
        box-shadow: none;
        max-height: 92%;
        overflow: auto;
    }
    /deep/ .docx{
        width: 100% !important;
    }
    /deep/ .el-dialog__header{
        background: #fff !important;
        text-align: left;
    }
    /deep/ .el-dialog__body{
        padding: 0 !important;
    }
    /deep/ .docx-wrapper{
        padding: 0 !important;
    }

    img {
        background: #fff;
        max-width: 90%;
        object-fit: scale-down;
    }
}

.xlsxBox {
    min-width: 60%;
    min-height: 500px;
    overflow: auto;

}
</style>